<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
    <script src="../../scripts/jquery-1.11.3.min.js"></script>
    <script src="../../scripts/lib/echarts-2.2.7/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="chart1" style="height:100%;width:100%; margin-top:-76px;"></div>
<!-- ECharts单文件引入 -->


<script type="text/javascript">
$(function() {

    // 路径配置
    require.config({
        paths: {
            echarts: '../../scripts/lib/echarts-2.2.7'
        }
    });

    require(
        [
            'echarts',
            'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
        ],
        function(ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('chart1'));
			
			 option = {
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient : 'horizontal',
					x : 'left',
					y: 'bottom',
					data:['处理中','已处理','未处理','7日内处理','15日内处理','30日内处理','60日内处理','超过60日内处理']
				},
				toolbox: {
					show : false,
					feature : {
						mark : {show: true},
						dataView : {show: true, readOnly: false},
						magicType : {
							show: true, 
							type: ['pie', 'funnel']
						},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},
				calculable : false,
				series : [
					{
						name:'处理进度',
						type:'pie',
						selectedMode: 'single',
						radius : [0, 60],
						center: ['50%', '50%'],
						// for funnel
						x: '30%',
						width: '40%',
						funnelAlign: 'right',
						max: 1548,
						
						itemStyle : {
							normal : {
								label : {
									position : 'inner'
								},
								labelLine : {
									show : false
								}
							}
						},
						data:[
							{value:600, name:'处理中'},
							{value:719, name:'已处理'},
							{value:1548, name:'未处理', selected:true}
						]
					},
					{
						name:'处理进度',
						type:'pie',
						radius : [90, 110],
						
						// for funnel
						x: '60%',
						width: '35%',
						funnelAlign: 'left',
						max: 1048,
						
						data:[
							{value:123, name:'7日内处理'},
							{value:28, name:'15日内处理'},
							{value:356, name:'30日内处理'},
							{value:156, name:'60日内处理'},
							{value:56, name:'超过60日内处理'}
						]
					}
				]
			};
			var ecConfig = require('echarts/config');
			myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param){
				var selected = param.selected;
				var serie;
				var str = '当前选择： ';
				for (var idx in selected) {
					serie = option.series[idx];
					for (var i = 0, l = serie.data.length; i < l; i++) {
						if (selected[idx][i]) {
							str += '【系列' + idx + '】' + serie.name + ' : ' + 
								   '【数据' + i + '】' + serie.data[i].name + ' ';
						}
					}
				}
				document.getElementById('wrong-message').innerHTML = str;
			})
								
                    		
                    
			
			
            // 为echarts对象加载数据 
            myChart.setOption(option);
			window.onresize = myChart.resize
        }
    );

})
</script>
</body>
</html>

